<template>
  <div class="nav">
    <ul class="header-nav">
      <li class="nav-item" @mouseenter="myShow = true" @mouseleave="myShow = false">
        <router-link class="me-meituan" to="/myMeituan">我的美团</router-link>
        <dl v-show="myShow" class="nav-item-first">
          <dd>
            <router-link to="/order">我的订单</router-link>
          </dd>
          <dd>
            <router-link to="/order">我的收藏</router-link>
          </dd>
          <dd>
            <router-link to="/order">抵用券</router-link>
          </dd>
          <dd>
            <router-link to="/order">账户设置</router-link>
          </dd>
        </dl>
      </li>
      <li class="nav-item">
        <router-link class="phone-app" to="/phoneApp">手机APP</router-link>
      </li>
      <li class="nav-item" @mouseenter="centerShow = true" @mouseleave="centerShow = false">
        <span>商家中心</span>
        <dl v-show="centerShow" class="nav-item-second">
          <dd>
            <router-link to="/centerShow">美团餐饮商户中心</router-link>
          </dd>
          <dd>
            <router-link to="/centerShow">登录商家中心</router-link>
          </dd>
          <dd>
            <router-link to="/centerShow">美团智能收银</router-link>
          </dd>
          <dd>
            <router-link to="/centerShow">手机免费开店</router-link>
          </dd>
          <dd>
            <router-link to="/centerShow">餐饮代理商招募</router-link>
          </dd>
          <dd>
            <router-link to="/centerShow">商家申请开票</router-link>
          </dd>
          <dd>
            <router-link to="/centerShow">免费合作美团排队</router-link>
          </dd>
        </dl>
      </li>
      <li class="nav-item" @mouseenter="ruleShow = true" @mouseleave="ruleShow = false">
        <span>美团规则</span>
        <dl v-show="ruleShow" class="nav-item-third">
          <dd>
            <router-link to="/rule">规则中心</router-link>
          </dd>
          <dd>
            <router-link to="/rule">规则目录</router-link>
          </dd>
          <dd>
            <router-link to="/rule">规则评议员</router-link>
          </dd>
        </dl>
      </li>
      <li class="nav-item" @mouseenter="navShow = true" @mouseleave="navShow = false">
        <span>网站导航</span>
        <div v-show="navShow" class="nav-item-nav" @mouseenter="navShow = true" @mouseleave="navShow = false">
          <dl class="luyou">
            <dt>酒店旅游</dt>
            <dd><a href="https://www.meituan.com/iflight/" target="_blank">国际机票</a></dd>
            <dd><a href="https://www.meituan.com/train/" target="_blank">火车票</a></dd>
            <dd><a href="https://phoenix.meituan.com/" target="_blank">榛果民宿</a></dd>
            <dd><a href="https://hotel.meituan.com/nanjing/c20036/" target="_blank">经济型酒店</a></dd>
            <dd><a href="https://hotel.meituan.com/nanjing/c20037/" target="_blank">主题酒店</a></dd>
            <dd><a href="https://hotel.meituan.com/nanjing/c20038/" target="_blank">商务酒店</a></dd>
            <dd><a href="https://hotel.meituan.com/nanjing/c20039/" target="_blank">公寓</a></dd>
            <dd><a href="https://hotel.meituan.com/nanjing/c20040/" target="_blank">豪华酒店</a></dd>
            <dd><a href="https://hotel.meituan.com/nanjing/c20041/" target="_blank">客栈</a></dd>
            <dd><a href="https://hotel.meituan.com/nanjing/c20042/" target="_blank">青年旅社</a></dd>
            <dd><a href="https://hotel.meituan.com/nanjing/c20043/" target="_blank">度假酒店</a></dd>
            <dd><a href="https://hotel.meituan.com/nanjing/c20044/" target="_blank">别墅</a></dd>
            <dd><a href="https://hotel.meituan.com/nanjing/c20045/" target="_blank">农家院</a></dd>
          </dl>
          <dl class="meishi">
            <dt>吃美食</dt>
            <dd><a href="https://nj.meituan.com/meishi/c20004/" target="_blank">烤鱼</a></dd>
            <dd><a href="https://nj.meituan.com/meishi/c36/" target="_blank">特色小吃</a></dd>
            <dd><a href="https://nj.meituan.com/meishi/c54/" target="_blank">烧烤</a></dd>
            <dd><a href="https://nj.meituan.com/meishi/c40/" target="_blank">自助餐</a></dd>
            <dd><a href="https://nj.meituan.com/meishi/c17/" target="_blank">火锅</a></dd>
            <dd><a href="https://nj.meituan.com/meishi/c393/" target="_blank">代金券</a></dd>
          </dl>
          <dl class="movie">
            <dt>看电影</dt>
            <dd><a href="https://maoyan.com/films" target="_blank">热映电影</a></dd>
            <dd><a href="https://maoyan.com/cinemas" target="_blank">热门影院</a></dd>
            <dd><a href="https://maoyan.com/board" target="_blank">热映电影口碑榜</a></dd>
            <dd><a href="https://maoyan.com/board/6" target="_blank">最受期待电影</a></dd>
            <dd><a href="https://maoyan.com/board/1" target="_blank">国内票房榜</a></dd>
            <dd><a href="https://maoyan.com/board/2" target="_blank">北美票房榜</a></dd>
            <dd><a href="https://maoyan.com/board/4" target="_blank">电影排行榜</a></dd>
          </dl>
          <dl class="app">
            <dt>手机应用</dt>
            <dd>
              <a href="https://i.meituan.com/mobile/down/meituan" target="_blank">
                <img class="appicon" src="//s0.meituan.net/bs/fe-web-meituan/2d53095/img/appicons/meituan.png"
                     title="美团app" alt="美团app"/>
              </a>
            </dd>
            <dd>
              <a href="https://waimai.meituan.com/mobile/download/default" target="_blank">
                <img class="appicon" src="//s1.meituan.net/bs/fe-web-meituan/404d350/img/appicons/waimai.png"
                     title="外卖app" alt="外卖app"/>
              </a>
            </dd>
            <dd>
              <a href="https://phoenix.meituan.com/app/" target="_blank">
                <img class="appicon" src="//s0.meituan.net/bs/fe-web-meituan/404d350/img/appicons/zhenguo.png"
                     title="榛果app" alt="榛果app"/>
              </a>
            </dd>
            <dd>
              <a href="https://www.dianping.com/events/m/index.htm" target="_blank">
                <img class="appicon" src="//s1.meituan.net/bs/fe-web-meituan/404d350/img/appicons/dianping.png"
                     title="点评app" alt="点评app"/>
              </a>
            </dd>
            <dd>
              <a href="https://maoyan.com/app" target="_blank">
                <img class="appicon" src="//s1.meituan.net/bs/fe-web-meituan/404d350/img/appicons/maoyan.png"
                     title="猫眼app" alt="猫眼app"/>
              </a>
            </dd>
          </dl>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        myShow: false,
        centerShow: false,
        ruleShow: false,
        navShow: false
      };
    }
  };
</script>

<style lang="stylus" rel="stylussheet/stylus">
  .nav
    .header-nav
      list-style none
      padding 0
      margin 0
      font-size 12px
      color #999999
      .nav-item
        float left
        position relative
        padding 14px 12px
        box-sizing border-box
        &:hover
          box-shadow 0 -3px 5px 0 rgba(0, 0, 0, 0.1)
          background #fff
          border-bottom none
        > dl
          position absolute
          z-index 1000
          right 0
          top 0
          margin-top 40px
          box-sizing content-box
          box-shadow 0 3px 5px 0 rgba(0, 0, 0, 0.1)
          text-align center
          border-bottom-left-radius 4px
          border-bottom-right-radius 4px
          background #fff
          > dd
            display block
            padding 14px 12px
            font-size 12px
        > .nav-item-first
          width 100%
          background #fff
        > .nav-item-second
          width 130px
          background #fff
        > .nav-item-third
          width 85px
          background #fff
        > .nav-item-nav
          display flex
          width 1200px
          min-height 100px
          background #FFFFFF
          position absolute
          z-index 1000
          right 0
          top 0
          margin-top 40px
          padding 30px 36px 36px 47px
          box-shadow 0 3px 5px 0 rgba(0, 0, 0, 0.1)
          border-bottom-left-radius 4px
          border-bottom-right-radius 4px
          .luyou
            flex 3
            font-size 0
            padding-right 50px
            dt
              margin-bottom 26px
              font-size 14px
              color #222222
              font-weight 700
              text-align center
            dd
              display inline-block
              width 33%
              text-align center
              font-size 12px
              height 26px
              line-height 26px
          .meishi
            flex 2
            font-size 0
            padding-right 50px
            dt
              margin-bottom 26px
              font-size 14px
              color #222222
              font-weight 700
              text-align center
            dd
              display inline-block
              width 50%
              text-align center
              font-size 12px
              height 26px
              line-height 26px
          .movie
            flex 1
            font-size 0
            padding-right 50px
            dt
              margin-bottom 26px
              font-size 14px
              color #222222
              font-weight 700
              text-align center
            dd
              display inline-block
              width 100%
              text-align center
              font-size 12px
              height 26px
              line-height 26px
          .app
            flex 4
            font-size 0
            dt
              margin-bottom 26px
              font-size 14px
              color #222222
              font-weight 700
              text-align center
            dd
              display inline-block
              margin 0 8px
              width 60px
              height 74px
              img
                width 60px
                height 60px
</style>
